(function() {
    var tempData = {
        message: "Hello World!",
        todos: [{
            text: "first"
        }, {
            text: "second"
        }, {
            text: "third"
        }]
    };
    var demo = new Vue({
        el: "#demo",
        data: tempData,
        methods: {
            reverseMessage: function() {
                this.message = this.message.split("").reverse().join("")
            }
        }
    });

    /**
     * [description]$watch和nextTick的区别
     * @param  {[type]} newVal                             [description]
     * @param  {[type]} oldVal){        console.log(newVal);    } [description]
     * @return {[type]}                                    [description]
     */
    demo.$watch("message", function(newVal, oldVal) {
        console.log(newVal);
    })
    demo.message = "chANnge info";
    Vue.nextTick(function() {
        console.log("change")
    })

    //app
    new Vue({
        el: "#app",
        data: {
            newTodo: "",
            todos: [{
                text: "Add some todos"
            }],
            a: 4
        },
        //计算属性
        computed: {
            b: function() {
                return this.a + 4
            }
        },
        methods: {
            addTodo: function() {
                var text = this.newTodo.trim()
                if (text) {
                    this.todos.push({ text: text })
                    this.newTodo = ""
                }
            },
            removeTodo: function(index) {
                this.todos.splice(index, 1)
            }
        }
    })

    //extend
    /**
     * [Profile description]也可以使用component
     * @type {[type]}
     */
    var Profile = Vue.extend({
        template: '<p>{{firstName}} {{lastName}} is {{alias}}</p>'
    })
    var profile = new Profile({
        data: {
            firstName: 'MY',
            lastName: 'name',
            alias: 'aka'
        }
    })
    profile.$mount("#mount-point")

    ///table-example
    // register the grid component
    Vue.component('demo-grid', {
        template: '#grid-template',
        props: {
            data: Array,
            columns: Array,
            filterKey: String
        },
        data: function() {
            var sortOrders = {}
            this.columns.forEach(function(key) {
                sortOrders[key] = 1
            })
            return {
                sortKey: '',
                sortOrders: sortOrders
            }
        },
        methods: {
            sortBy: function(key) {
                this.sortKey = key
                this.sortOrders[key] = this.sortOrders[key] * -1
            }
        }
    })

    // bootstrap the demo
    var demo = new Vue({
        el: '#table-example',
        data: {
            searchQuery: '',
            gridColumns: ['name', 'power'],
            gridData: [
                { name: 'Chuck Norris', power: Infinity },
                { name: 'Bruce Lee', power: 9000 },
                { name: 'Jackie Chan', power: 7000 },
                { name: 'Jet Li', power: 8000 }
            ]
        }
    })
    ///table-example
    
})()
